import React from 'react';
import ThemeItem from './Item';
import { WeaInput, WeaSelect, WeaLocaleProvider } from 'ecCom';
import {Col, Row} from "antd";
import classNames from "classnames";
import ColorPicker from 'rc-color-picker';
const getLabel = WeaLocaleProvider.getLabel;

import {defaultCfg, fontFamilyOpts, fontSizeOpts, visbleType, visibleOpts} from "../../../../../../constants/theme";

const types = {
  Text: '0',
  Picture: '1'
};
const layout = {
  Left: 'left',
  Center: 'center',
  Right: 'right'
};

const typeOpts = () => {
  return [
    { key: types.Text, selected: false, showname: getLabel('511817','文字') },
    { key: types.Picture, selected: false, showname: getLabel('511818','图片') }
  ]
};
const layoutOpts = () => {
  return [
    { key: layout.Left, selected: false, showname: getLabel('511819','居左') },
    { key: layout.Center, selected: false, showname: getLabel('511820','居中') },
    { key: layout.Right, selected: false, showname: getLabel('511821','居右') }
  ]
};


const scope = 'header.css';
export default class ThemeHeaderSetting extends React.Component {
  formatVisible = visible => {
    return visible == visbleType.Visble;
  }

  formatFW = () => {
    const { fontWeight } = this.props.data.css;

    if ('bold' === fontWeight) return 'normal';

    return 'bold';
  }

  onFileInputClick(){
    if(this.fileInput){
      this.fileInput.click()
    }
  };

  render() {
    const { onChange, data, onUploadImg } = this.props;

    const { fontFamily, fontSize, fontWeight, color } = data.css;
    const bold = 'bold' === fontWeight;

    return (
      <div>
        <h4>{getLabel('511822','页眉')}</h4>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@a6is37`} label={getLabel('511823','页面展示')}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@mxliom`}
            value={data.visible ? '1' : '0'}
            options={visibleOpts()}
            onChange={onChange('header.visible', this.formatVisible)}
          />
        </ThemeItem>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@afvvtl`} label={getLabel('511824','类型')}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@z6jmvy`}
            detailtype={3}
            value={data.type}
            options={typeOpts()}
            onChange={onChange('header.type')}
          />
        </ThemeItem>

        {
          data.type == types.Text ?
            <div>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@az6sxn`} label={getLabel('511825','文字内容')} visible={types.Text === data.type} >
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@dagysh`}
                  inputType={'multilang'}
                  value={data.text}
                  onChange={onChange('header.text')}
                />
              </ThemeItem>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@nle9f4`} label={getLabel('511805','字体样式')}>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zufjsw`} style={{ padding: 0 }}>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@iqjpyr`} span={7}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@i29spl`}
                      value={fontFamily}
                      options={fontFamilyOpts()}
                      onChange={onChange(`${scope}.fontFamily`)}
                    />
                  </Col>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k64k9y`} span={6} offset={1}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@9wjk4c`}
                      value={fontSize}
                      options={fontSizeOpts()}
                      onChange={onChange(`${scope}.fontSize`)}
                    />
                  </Col>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@25xrl4`} span={4} offset={1}>
              <span
                onClick={onChange(`${scope}.fontWeight`, this.formatFW)}
                className={classNames('btn-font-weight', { bold })}
              >
                B
              </span>
                  </Col>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9zfx3q`} span={4} offset={1}>
                    <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@e1qwj0`}
                      color={color}
                      onChange={onChange(`${scope}.color`)}
                    />
                  </Col>
                </Row>
              </ThemeItem>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@iqj0ct`} label={getLabel('511826','布局')}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@1iybk1`}
                  detailtype={3}
                  value={data.css.textAlign}
                  options={layoutOpts()}
                  onChange={onChange('header.css.textAlign')}
                />
              </ThemeItem>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@unz3gd`} label={getLabel('511783','底色')}>
                <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@pyj1h3`}
                  color={data.css.backgroundColor}
                  onChange={onChange('header.css.backgroundColor')}
                />
              </ThemeItem>
            </div>
            :
            <div>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@cwzg6n`} label={getLabel('511782','背景图片')}>
                <img className="edc-row-img" onClick={this.onFileInputClick.bind(this)} src={data.img && data.img || defaultCfg.emptyImg}></img>
                <input type="file" style={{display: 'none'}} ref={(input)=>{this.fileInput = input}} key="header.img" onChange={onUploadImg.bind(this)} accept=".jpg,.gif,.png,.jpeg"></input>
              </ThemeItem>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@trdcn2`} label={getLabel('511826','布局')}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@c7os9d`}
                  detailtype={3}
                  value={data.css.textAlign}
                  options={layoutOpts}
                  onChange={onChange('header.css.textAlign')}
                />
              </ThemeItem>
              <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@sgr9yh`} label={getLabel('511783','底色')}>
                <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@hg88od`}
                  color={data.css.backgroundColor}
                  onChange={onChange('header.css.backgroundColor')}
                />
              </ThemeItem>
            </div>

        }

      </div>
    )
  }
}